<template>
  <view>
    <view class="navbar">
      <u-icon name="arrow-left" color="#191919" size="20" @click="goBack()" class="back-box"></u-icon>
      <view class="title">设置</view>
    </view>
    <view class="phxx-item content">
      <view class="phxx-item-content">
        <view class="bottom">
          <view class="items">
            <text class="til">用户信息</text>
            <u-avatar :src="avatar"></u-avatar>
          </view>
          <view class="items">
            <text class="til">用户名称</text>
            <input class="val" :value="user.userName" disabled />
          </view>
          <view class="items">
            <text class="til">手机号码</text>
            <input class="val" :value="user.phonenumber" disabled />
          </view>
          <view class="items">
            <text class="til">用户邮箱</text>
            <input class="val" :value="user.email" disabled />
          </view>
          <view class="items">
            <text class="til">所属部门</text>
            <input class="val" :value="user.deptName" disabled />
          </view>
          <view class="items">
            <text class="til">所属角色</text>
            <input class="val" :value="user.roleName" disabled />
          </view>
          <view class="items">
            <text class="til">创建日期</text>
            <input class="val" :value="user.createTime" disabled />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { userInfos } from "@/api/mine/user.js";
  import config from "@/config";
  export default {
    data() {
      return {
        avatar: "",
        user: {
          userName: undefined,
          phonenumber: undefined,
          email: undefined,
          deptName: undefined,
          roleName: undefined,
          createTime: undefined,
        },
      };
    },
    onPullDownRefresh() {
      this.getInf();
      uni.stopPullDownRefresh();
    },
    created() {
      this.getInf();
    },
    methods: {
      goBack() {
        const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack({
            delta: 1,
          });
        } else {
          // 如果是第一个页面，可以跳转到首页
          uni.switchTab({
            url: "/pages/mine/info/index",
          });
        }
      },
      async getInf() {
        let res = await userInfos();
        if (res.code == 200) {
          this.avatar = config.baseUrl + res.data.avatar;

          this.user.userName = res.data.userName;
          this.user.phonenumber = res.data.phonenumber;
          this.user.email = res.data.email;
          this.user.deptName = res.data.dept.deptName;
          this.user.roleName = res.data.roles[0].roleName;
          this.user.createTime = res.data.createTime;
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .phxx-item {
    width: 700rpx;
    padding: 0 30rpx 20rpx 30rpx;
    box-sizing: border-box;
    margin: 140rpx auto 20rpx auto;
    border-radius: 16rpx;
    background: #fff;
    font-size: 30rpx;
    font-weight: 500;
    color: #333;

    .phxx-item-content {
      .bottom {
        padding: 10rpx 0 0 0;

        >.items {
          padding-bottom: 6rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2rpx solid #f1f2f5;
          padding-top: 30rpx;
        }

        .btns {
          button {
            width: 100%;
            height: 40px !important;
            margin-top: 50px;
            line-height: 40px !important;
          }
        }

        .til {
          width: 25%;
          display: inline-block;
        }

        .val {
          width: 75%;
          display: inline-block;
          border-radius: 5px;
          height: 30px;
          text-align: right;
        }
      }
    }
  }
</style>